<!-- HTML5文档-->
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>添加用户</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="width: 400px;">
    <h3 style="text-align: left;">新建用户</h3>
    <form action="user" method="post">
        <input type="hidden" name="method" value="add"/>
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" class="form-control" v-model="user.username" id="username" name="username"
                   placeholder="请输入用户名">
        </div>

        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" v-model="user.name" id="name" name="name" placeholder="请输入姓名">
        </div>

        <div class="form-group">
            <label for="sex">性别：</label>
            <select name="sex" class="form-control" v-model="user.sex" id="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>

        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" class="form-control" v-model="user.password" id="password" name="password"
                   placeholder="请输入密码">
        </div>

        <div class="form-group" style="text-align: right">
            <input class="btn btn-primary" type="button" @click="addUser" value="保存"/>
        </div>
    </form>
</div>

<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: ".container",
        data: {
            user: {}
        },
        methods: {
            addUser: function () {
                axios.post("/user/save", this.user).then(response => {
                    //如果保存成功，就跳转到list.html
                    if (response.data.flag) {
                        location.href = "list.html";
                    } else {
                        alert("保存联系人失败");
                    }
                });
            }
        }
    });
</script>
</body>
</html>